<template>
	<view class="message">
		<u-navbar title-color="#000" :isBack="false" back-icon-color="#ffffff" :is-fixed="true" height="60" title="信息列表"
		 :back-text-style="{color: '#fff'}">
			<view class="navbar-right" slot="right">
				<view class="message-box right-item">
					<u-icon name="more-circle" size="40"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="menu-container">
			<view class="menu-content">
				<view class="menu" v-for="(value,key,index,) in menuList" :key="index" @click="goTo(value.url)">
					<image class="menu-icon" :src="value.icon"></image>
					<text>{{value.title}}</text>
				</view>
			</view>
		</view>
		<view class="message-container">
			<view class="message-content" @click="goChat">
				<view class="message-pic"></view>
				<view class="message-title">
					<text>官方助手 <image src="../../static/icon/橙色认证.png" class="message-icon"></image> </text>
					<text class="text-bottom">使用指南查收！</text>
				</view>
				<view class="menu-time">
					<text>10:18</text>
					<view class="point">1</view>
				</view>
			</view>
		</view>

		<view class="uni-b"></view>
		<tab-bar pagePath="/pages/message/message"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
						id: 0,
						icon: '../../static/icon/纯白实心收藏.png',
						title: '点赞',
						url: "/pages/my/like-list/like-list"
					},
					{
						id: 1,
						icon: '../../static/icon/纯白实心关注.png',
						title: '关注',
						url: "/pages/my/follow-list/follow-list"
					},
					{
						id: 2,
						icon: '../../static/icon/纯白实心评论.png',
						title: '评论',
						url: "/pages/my/comm-list/comm-list"
					},
				]

			};
		},
		methods: {
			goChat() {
				this.$comm.navigateTo('/pages/chat/chat')
			},
			goTo(url) {
				this.$comm.navigateTo(url)
			}
		}
	}
</script>

<style lang="scss">
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		display: flex;
	}

	.message-icon {
		width: 40rpx;
		height: 30rpx;
	}

	.menu-container {
		width: 750rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 0upx 20upx;
	}

	.menu-content {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto 40rpx;
	}

	.menu {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: $indexColor;
		border-radius: 15upx;
		padding: 20upx;
		box-sizing: border-box;
	}

	.message-container {
		width: 100%;
		height: 140rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.message-content {
		width: 710rpx;
		height: 100%;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.message-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #CCCCCC;
	}

	.message-title {
		height: 90rpx;
		display: flex;
		flex-direction: column;
		margin-left: 50rpx;
		font-size: 26rpx;
		justify-content: space-between;
	}

	.text-bottom {
		color: #808080;
		font-size: 18rpx;
	}

	.message-icon {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.menu-time {
		position: absolute;
		top: 26rpx;
		left: 640rpx;
		font-size: 26rpx;
	}

	.point {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(242, 133, 94);
		color: #FFFFFF;
		font-size: 20rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}
</style>
